<template>
	<view>
		<!-- 顶部组件 -->
		<u-navbar :is-back="false" :background="{ background: '#f2b739' }" :border-bottom="false" id="nav-bar">
			<view class="top u-flex"><image src="../../../static/life_title.png"></image></view>
		</u-navbar>
		<!-- tab栏 -->
		<view class="tabs" :style="{ top: navBarHeight + 'px' }" id="tabs">
			<u-tabs
				:list="tabList"
				:is-scroll="false"
				:current="tabCurrent"
				:duration="0.2"
				:gutter="80"
				
				name="title"
				font-size="32"
				bg-color="#f2b739"
				active-color="#fff"
				inactive-color="#fcf4e2"
				:bar-style="{ height: '8rpx' }"
				@change="changeTabs"
			></u-tabs>
		</view>
		<view v-if="contentType == 'small-card'">
			<!-- banner -->
			<view class="banner" :style="{ marginTop: 18 + tabsHeight + 'px' }" v-show="isConcentration">
				<swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="200" @change="swiperChange">
					<swiper-item v-for="(item, index) in bannerList" :key="item.id" class="swiper-wrap">
						<view class="u-list-image-wrap" :style="{ transform: swiperCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)' }">
							<image class="img" :src="item.picUrl"></image>
							<!-- <view class="swiper-content u-flex-col">
								<image class="icon" :src="item.icon"></image>
								<text class="title">{{ item.title }}</text>
								<text>{{ item.subTitle }}</text>
							</view> -->
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 分类 -->
			<view class="kkong u-flex" v-show="isConcentration">
				<view class="item u-flex-col" v-for="item in kkong" :key="item.id">
					<image :src="item.picUrl"></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
			<!-- 占位 -->
			<view class="gap" v-show="!isConcentration" :style="{ height: 20 + tabsHeight + 'px' }"></view>
			<view class="changeTabLoading" v-show="changeTabLoading" :style="[{ height: loadingHeight + 'px' }]"><full-loading></full-loading></view>
			<!-- 内容区 -->
			<u-waterfall v-model="tabsContent" ref="uWaterfall" add-time="100">
				<template v-slot:left="{ leftList }">
					<view class="content left">
						<view class="item" v-for="(item, index) in leftList" :key="index" @click="goToDetail(item.contentId)">
							<image class="img" :src="item.pic" mode="widthFix" lazy-load></image>
							<text class="title u-line-2">{{ item.title }}</text>
							<view class="author u-flex">
								<image :src="item.author.avatar"></image>
								<text class="name u-line-1">{{ item.author.nickname }}</text>
								<text class="reading">{{ item.readingNum }}阅读</text>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="content right">
						<view class="item" v-for="(item, index) in rightList" :key="index" @click="goToDetail(item.contentId)">
							<image class="img" :src="item.pic" mode="widthFix" lazy-load></image>
							<text class="title u-line-2">{{ item.title }}</text>
							<view class="author u-flex">
								<image :src="item.author.avatar"></image>
								<text class="name u-line-1">{{ item.author.nickname }}</text>
								<text class="reading">{{ item.readingNum }}阅读</text>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>
		<view v-if="contentType == 'big-card'">
			<!-- 占位 -->
			<view class="gap" v-show="!isConcentration" :style="{ height: 20 + tabsHeight + 'px' }"></view>
			<view class="changeTabLoading" v-show="changeTabLoading" :style="[{ height: loadingHeight + 'px' }]"><full-loading></full-loading></view>
			<view class="big-card" v-for="(item, index) in tabsContent" :key="index" @click="goToDetail(item.contentId)">
				<view class="author u-flex">
					<image :src="item.author.avatar" mode="aspectFit"></image>
					<view class="name u-flex-col">
						<text class="nickname">{{ item.author.nickname }}</text>
						<text class="subname">官方品牌</text>
					</view>
					<view class="attention u-flex" @click.stop="followAuthor(item)" :class="{ attentioned: item.followed }">
						<u-icon v-if="!item.followed" custom-prefix="custom-icon" name="add" color="#fff" size="18"></u-icon>
						<text>{{ !item.followed ? '关注' : '已关注' }}</text>
					</view>
				</view>
				<view class="summary u-line-3">
					<text>{{ item.contentType == 'article' ? item.title : item.summary }}</text>
					<view class="mask" v-if="item.contentType != 'article'"><text>查看全文</text></view>
				</view>
				<view class="big-img" v-if="item.contentType == 'article'">
					<!-- <image :src="item.pic" mode="aspectFill"></image> -->
					<u-lazy-load :image="item.pic" loading-img="/static/lazy/goods-lazy-load.png" mode="aspectFill" height="416"></u-lazy-load>
					<view class="tips" v-show="item.pic">文章</view>
				</view>
				<view class="group-img" v-if="item.contentType == 'note' || item.contentType == 'list'">
					<view class="img-box u-flex">
						<view class="img" v-for="(img, imgindex) in item.pics" :key="imgindex">
							<!-- <image :src="img" mode="aspectFill"></image> -->
							<u-lazy-load :image="img" loading-img="/static/lazy/goods-lazy-load.png"></u-lazy-load>
						</view>
						<view class="label" v-if="item.picsNum != 3 && item.picsNum != 6 && item.picsNum != 9">{{ item.picsNum }}图</view>
					</view>
				</view>
				<!-- 话题 -->
				<view class="topic u-flex" v-if="item.contentTopic">
					<image class="sign" src="../../../static/icon/topic.png"></image>
					<text>{{ item.contentTopic[0].name }}</text>
					<view class="icon"><u-icon custom-prefix="custom-icon" name="right" size="24" color="#b0b0b0"></u-icon></view>
				</view>
				<!-- 阅读量 + 评论 + 点赞量 -->
				<view class="reading-data u-flex">
					<view class="reading-num">
						<text class="num">{{ item.readingNum }}</text>
						<text>阅读</text>
					</view>
					<view style="margin-left: auto" class="u-flex">
						<view class="comment u-flex">
							<image src="../../../static/icon/feed_pinwei_comment.png"></image>
							<text>评论</text>
						</view>
						<view class="zan u-flex" @click.stop="giveLike(item)">
							<image v-show="!item.likeStatusInfo.like" src="../../../static/icon/feed_pinwei_not_fav.png"></image>
							<image v-show="item.likeStatusInfo.like" src="../../../static/icon/feed_pinwei_fav.png"></image>
							<text v-show="item.likeStatusInfo.likeNum" :style="{ color: item.likeStatusInfo.like ? '#FE1F1D' : '#333' }">{{ item.likeStatusInfo.likeNum }}</text>
							<text v-show="!item.likeStatusInfo.likeNum">赞</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="showLoadmore">
			<u-loadmore :status="loadingStatus" :margin-top="30" :margin-bottom="20" bg-color="#f9f9f9" font-size="24" :load-text="loadingText" @loadmore="loadmore" />
		</view>
		<view class="pageLoading" v-show="fullLoading"><full-loading></full-loading></view>
		<mi-toast ref="miToast" />
	</view>
</template>

<script>
import fullLoading from '@/components/full-loading.vue'
export default {
	data() {
		return {
			tabList: [],
			tabID: 10000,
			tabCurrent: 0,
			bannerList: [],
			kkong: [],
			tabsContent: [],
			swiperCurrent: 0,
			page: 1,
			navBarHeight: 0,
			tabsHeight: 0,
			loadingHeight: 0,
			fullLoading: true,
			changeTabLoading: false,
			contentType: 'small-card',
			loadingStatus: 'loadmore',
			loadingText: {
				loadmore: '上拉加载更多',
				loading: '努力加载中~',
				nomore: '没有更多帖子了'
			}
		}
	},
	onLoad() {
		this.getViewHeight()
		this.getHomeData()
	},
	methods: {
		getHomeData() {
			this.$u.api.lifeHomePage().then(res => {
				// console.log(res)
				res.data.tab = res.data.tab.filter(x => x.title != '看视频')
				this.tabList = res.data.tab
				this.bannerList = res.data.banner
				this.kkong = res.data.kkong
				this.tabID = this.tabList[0].id
				this.getTabsContent()
				this.fullLoading = false
			})
		},
		getTabsContent() {
			let data = {
				tab: this.tabID,
				page: this.page,
				pageSize: this.tabID == 10026 || this.tabID == 10019 ? 5 : 20 //10026和10019是多图卡片，数据量请求少一些
			}
			this.$u.api.lifeTabsContent(data).then(res => {
				console.log(res)
				this.tabsContent.push(...res.data)
				// 处理图片
				// 只有页面类型为大图的时候，才处理图片
				if (this.contentType == 'big-card') {
					// 遍历所有内容
					this.tabsContent.forEach(x => {
						// 当内容类型为笔记或者列表的时候,才处理
						if (x.contentType == 'note' || x.contentType == 'list') {
							// 由于上拉加载同样适用此方法,会遍历之前已经处理过的图片,所以这里要先判断类型
							if (typeof x.pics == 'string') {
								x.pics = x.pics.split(',')
								// 保存未截取之前的图片数量,用于页面显示图片总数
								this.$set(x, 'picsNum', x.pics.length)
								// 当图片大于3张小于6张时,只保留3张图
								if (3 < x.picsNum && x.picsNum < 6) {
									x.pics.splice(3)
									// 当图片大于6张小于9张时,只保留6张图
								} else if (6 < x.picsNum && x.picsNum < 9) {
									x.pics.splice(6)
								}
							}
						}
					})
				}
				this.page++
				this.changeTabLoading = false
			})
		},
		changeTabs(index) {
			// 未重新赋值之前,操作清除瀑布流内容,因为上方用的v-if,10026和10019没有瀑布流
			if (this.tabID != 10026 && this.tabID != 10019) {
				this.$refs.uWaterfall.clear()
			}
			this.tabCurrent = index
			this.tabID = this.tabList[index].id
			if (this.tabID == 10026 || this.tabID == 10019) {
				this.contentType = 'big-card'
			} else {
				this.contentType = 'small-card'
			}
			this.page = 1
			this.tabsContent = []
			// console.log(this.$refs.uWaterfall)
			this.changeTabLoading = true
			this.getTabsContent()
		},
		giveLike(item) {
			console.log(item)
			item.likeStatusInfo.like = !item.likeStatusInfo.like
			if (item.likeStatusInfo.like) {
				item.likeStatusInfo.likeNum++
				this.showToast('品味生活，从点赞开始')
			} else {
				item.likeStatusInfo.likeNum--
			}
		},
		swiperChange(e) {
			this.swiperCurrent = e.detail.current
		},
		followAuthor(item) {
			item.followed = !item.followed
			if (item.followed) {
				this.showToast('品味相投，关注成功')
			}
		},
		showToast(title, type = 'success') {
			this.$refs.miToast.show({
				title: msg,
				type
			})
		},
		getViewHeight() {
			uni.createSelectorQuery()
				.in(this)
				.select('#nav-bar')
				.boundingClientRect(data => {
					this.navBarHeight = data.height
					uni.createSelectorQuery()
						.in(this)
						.select('#tabs')
						.boundingClientRect(data => {
							this.tabsHeight = data.height
							uni.getSystemInfo({
								success: res => {
									this.loadingHeight = res.windowHeight - this.navBarHeight - this.tabsHeight
								}
							})
						})
						.exec()
				})
				.exec()
		},
		loadmore() {
			this.getTabsContent()
			this.loadingStatus = 'loading'
		},
		goToDetail(uuid) {
			uni.navigateTo({
				url: '../../life/detail/detail?uuid=' + uuid
			})
		}
	},
	onReachBottom() {
		this.getTabsContent()
		this.loadingStatus = 'loading'
	},
	components: {
		fullLoading
	},
	computed: {
		showLoadmore() {
			return this.tabsContent.length !== 0 ? true : false
		},
		isConcentration() {
			return this.tabCurrent == 0 ? true : false
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f9f9f9;
}
.top {
	justify-content: center;
	width: 750rpx;
	image {
		width: 140rpx;
		height: 36rpx;
		transform: translateX(-30rpx);
	}
}
.tabs {
	position: fixed;
	// top: 80rpx;
	width: 750rpx;
	height: 42rpx;
	background-color: #f2b739;
	z-index: 10;
}
.u-tab-item {
	color: red;
	// padding: 0 30rpx;
}
.banner {
	// margin-top: ;
	padding: 10rpx 0;
	background: url('../../../static/life_bg.png') top no-repeat / 750rpx 282rpx;
	swiper {
		height: 296rpx;
		.swiper-wrap {
			position: relative;
			padding-left: 30rpx;
			height: inherit;
			width: 650rpx !important;
			// .u-list-scale {
			// 	transform-origin: center center;
			// }
			.u-list-image-wrap {
				width: 100%;
				height: 100%;
				transition: all 0.2s;
			}
			.img {
				width: 650rpx;
				height: 296rpx;
				border-radius: 24rpx;
			}
			.swiper-content {
				position: absolute;
				top: 0;
				left: 0;
				height: inherit;
				width: inherit;
				padding: 28rpx 24rpx;
				color: #fff;
				font-size: 28rpx;
				border-radius: 24rpx;
				overflow: hidden;
				// box-shadow: inset 0rpx 120rpx 45rpx 0rpx rgba($color: #333, $alpha: 0.2), inset 0rpx -120rpx 45rpx 0rpx rgba($color: #333, $alpha: 0.2);
				z-index: 10;
				.icon {
					width: 282rpx;
					height: 64rpx;
				}
				.title {
					margin: auto 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
}
.kkong {
	padding: 20rpx 0;
	.item {
		align-items: center;
		justify-content: space-between;
		width: 20%;
		height: 108rpx;
		font-size: 24rpx;
		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
}
.left {
	padding: 0 10rpx 0 20rpx;
}
.right {
	padding: 0 20rpx 0 10rpx;
}
.content {
	margin-top: 20rpx;
	.item {
		width: 100%;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		.img {
			width: 100%;
			border-radius: 12rpx 12rpx 0 0;
		}
		.title {
			font-size: 24rpx;
			color: #333;
			font-weight: bold;
			padding: 10rpx 20rpx;
		}
		.author {
			margin-top: 20rpx;
			padding: 0 20rpx;
			color: #666;
			font-size: 22rpx;
			image {
				width: 36rpx;
				height: 36rpx;
				min-width: 36rpx;
				border-radius: 18rpx;
				margin-right: 12rpx;
			}
			.name {
				max-width: 160rpx;
			}
			.reading {
				margin-left: auto;
			}
		}
	}
}
.big-card {
	padding: 24rpx;
	background-color: #fff;
	margin-bottom: 14rpx;
	.author {
		// margin: 30rpx 0;
		// padding: 30rpx 0;
		height: 60rpx;
		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			margin-right: 22rpx;
		}
		.name {
			height: inherit;
			// padding: 8rpx 0;
			justify-content: space-between;
		}
		.nickname {
			font-size: 24rpx;
			font-weight: bold;
		}
		.subname {
			font-size: 22rpx;
			color: #999;
		}
		.attention {
			margin-left: auto;
			justify-content: center;
			width: 102rpx;
			height: 42rpx;
			color: #fff;
			font-size: 24rpx;
			// font-weight: bold;
			border-radius: 28rpx;
			background: linear-gradient(to right, #ffba34, #ff9a40);
			text {
				margin-left: 6rpx;
			}
			&:active {
				opacity: 0.8;
			}
		}
		.attentioned {
			color: #b3b1b6 !important;
			background: #f8f6f9 !important;
		}
	}
	.summary {
		position: relative;
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 39rpx;
		.mask {
			position: absolute;
			bottom: 0;
			right: 0;
			// padding-left: 20rpx;
			color: #fabe00;
			box-shadow: -30rpx 0 16rpx 4rpx #fff;
			background-color: #fff;
			z-index: 1;
		}
	}
	.big-img {
		position: relative;
		margin: 20rpx 0;
		width: 100%;
		height: 416rpx;
		border-radius: 12rpx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
		.tips {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			padding: 2rpx 6rpx;
			font-size: 20rpx;
			// color: #333;
			// background-color: #fff;
			color: #fff;
			background-color: rgba($color: #000000, $alpha: 0.2);
			border-radius: 4rpx;
		}
	}
	.group-img {
		margin: 20rpx 0;
		.img-box {
			position: relative;
			flex-wrap: wrap;
			justify-content: space-between;
			border-radius: 12rpx;
			overflow: hidden;
			.img {
				width: 32.6%;
				height: 232rpx;
				margin-top: 6rpx;
				&:nth-child(-n + 3) {
					margin-top: 0;
				}
				image {
					height: 100%;
					width: 100%;
				}
			}
			.label {
				position: absolute;
				bottom: 4rpx;
				right: 0;
				padding: 4rpx 10rpx;
				color: #fff;
				font-size: 20rpx;
				background-color: rgba($color: #000000, $alpha: 0.4);
				border-radius: 6rpx 0 0 0;
			}
		}
	}
	.topic {
		display: inline-flex;
		flex-wrap: nowrap;
		// margin: 30rpx;
		margin-top: 10rpx;
		padding: 12rpx 10rpx 12rpx 18rpx;
		// width: auto;
		font-size: 26rpx;
		color: #2e2f31;
		background-color: #f7f7f7;
		border-radius: 10rpx;
		.sign {
			width: 32rpx;
			height: 29rpx;
			margin-right: 14rpx;
		}
		.icon {
			display: inline-block;
			// margin-left: 10rpx;
		}
	}
	.reading-data {
		margin-top: 10rpx;
		font-size: 22rpx;
		.reading-num {
			// font-size: 22rpx;
			color: #999;
			.num {
				margin-right: 6rpx;
			}
		}
		.comment {
			margin-right: 40rpx;
		}
		.comment,
		.zan {
			// margin-left: auto;
			font-weight: bold;
			image {
				margin-right: 6rpx;
				height: 38rpx;
				width: 34rpx;
			}
		}
	}
}
.pageLoading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #f9f9f9;
	z-index: 800;
}
.changeTabLoading {
	position: relative;
	width: 750rpx;
	// height: 1000rpx;
}
full-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
::v-deep .u-tab-item {
	// padding: 0 8rpx;
}
</style>
